<template>
  <div v-if="visible || !$attrs.hasOwnProperty('visible')" class="custom-loading-container">
    <div class="custom-loading">
      <div class="spinner"></div>
      <div class="loading-text">{{ text || '数据加载中...' }}</div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: true
  },
  text: {
    type: String,
    default: '数据加载中...'
  }
});
</script>

<style scoped>
.custom-loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 400px;
  position: relative;
}

.custom-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.spinner {
  width: 56px;
  height: 56px;
  border: 4px solid #f0f7ff;
  border-top: 4px solid #1989fa;
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  margin-bottom: 24px;
  position: relative;
}

.spinner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  background-color: #1989fa;
  border-radius: 50%;
  opacity: 0.1;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  text-align: center;
  padding: 0 20px;
  line-height: 1.5;
  letter-spacing: 0.5px;
}
</style>